<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'product-form',
	'enableAjaxValidation'=>false,
    'htmlOptions'=>array('enctype'=>'multipart/form-data'), 
)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">
		<?php echo $form->labelEx($model,'category_id'); ?>
		<?php echo $form->dropDownList($model,'category_id',CHtml::listData(Category::model()->findAll(), 'id', 'name')); ?>
        <?php echo CHtml::button('Create category', array(
            'onclick' => "{ addCategory(); $('#dialogCategory').dialog('open');}",
        )) ?>
		<?php echo $form->error($model,'category_id'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'os_id'); ?>
		<?php echo $form->dropDownList($model,'os_id',CHtml::listData(Os::model()->findAll(), 'id', 'name')); ?>
        <?php echo CHtml::button('Create Operation System', array(
            'onclick' => "{ addOs(); $('#dialogOs').dialog('open');}",
        )) ?>
		<?php echo $form->error($model,'os_id'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'name'); ?>
		<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>128)); ?>
		<?php echo $form->error($model,'name'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'model'); ?>
		<?php echo $form->textField($model,'model',array('size'=>60,'maxlength'=>64)); ?>
		<?php echo $form->error($model,'model'); ?>
	</div>
    
    <?php 
        $selectedColors = array();
        foreach ($model->colors as $color)
            array_push($selectedColors, $color->id);
    ?>
    <div class="row">
		<?php echo $form->labelEx($model,'colors'); ?>
        <div class="portlet-content">
        <?php echo CHtml::button('Create Color', array(
            'onclick' => "{ addColor(); $('#dialogColor').dialog('open');}",
        )) ?>
		<?php echo CHtml::checkBoxList(
            'Color', 
            $selectedColors, 
            CHtml::listData(Color::model()->findAll(),'id','name'),
            array(
                'template'=>'{input} {label}',
                'separator'=>'',
                'checkAll'=>'All',
                'labelOptions'=>array(
                    'style'=>'display:inline;',
                )
            )
        ); ?>
		</div>
        <?php echo $form->error($model,'colors'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'chip'); ?>
		<?php echo $form->textField($model,'chip',array('size'=>60,'maxlength'=>64)); ?>
		<?php echo $form->error($model,'chip'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'size'); ?>
		<?php echo $form->textField($model,'size'); ?> inches
		<?php echo $form->error($model,'size'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'weight'); ?>
		<?php echo $form->textField($model,'weight'); ?> KG
		<?php echo $form->error($model,'weight'); ?>
	</div>

    <div class="row">
		<?php echo $form->labelEx($model,'display'); ?>
		<?php echo $form->dropDownList($model,'display',CHtml::listData(Display::model()->findAll(), 'id', 'name')); ?>
        <?php echo CHtml::button('Create Display', array(
            'onclick' => "{ addDisplay(); $('#dialogDisplay').dialog('open');}",
        )) ?>
		<?php echo $form->error($model,'display'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'storage'); ?>
		<?php echo $form->textField($model,'storage'); ?> GB
		<?php echo $form->error($model,'storage'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'memory'); ?>
		<?php echo $form->textField($model,'memory'); ?> MB
		<?php echo $form->error($model,'memory'); ?>
	</div>

    <div class="row">
		<?php echo $form->labelEx($model,'sensors'); ?>
		<?php echo $form->dropDownList($model,'sensors',CHtml::listData(Sensor::model()->findAll(), 'id', 'name')); ?>
        <?php echo CHtml::button('Create Sensors', array(
            'onclick' => "{ addSensors(); $('#dialogSensors').dialog('open');}",
        )) ?>
		<?php echo $form->error($model,'sensors'); ?>
	</div>

	<?php 
        $selectedNetworks = array();
        foreach ($model->networks as $network)
            array_push($selectedNetworks, $network->id);
    ?>
    <div class="row">
		<?php echo $form->labelEx($model,'networks'); ?>
        <div class="portlet-content">
        <?php echo CHtml::button('Create Network', array(
            'onclick' => "{ addNetwork(); $('#dialogNetwork').dialog('open');}",
        )) ?>
		<?php echo CHtml::checkBoxList(
            'Network', 
            $selectedNetworks, 
            CHtml::listData(Network::model()->findAll(),'id','name'),
            array(
                'template'=>'{input} {label}',
                'separator'=>'',
                'checkAll'=>'All',
                'labelOptions'=>array(
                    'style'=>'display:inline;',
                )
            )
        ); ?>
		</div>
        <?php echo $form->error($model,'networks'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'camera'); ?>
		<?php echo $form->textField($model,'camera'); ?> Million Pixels
		<?php echo $form->error($model,'camera'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'battery'); ?>
		<?php echo $form->textField($model,'battery',array('size'=>60,'maxlength'=>64)); ?>
		<?php echo $form->error($model,'battery'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'power'); ?>
		<?php echo $form->textField($model,'power',array('size'=>60,'maxlength'=>64)); ?>
		<?php echo $form->error($model,'power'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'audio'); ?>
		<?php echo $form->textArea($model,'audio',array('rows'=>6, 'cols'=>50)); ?>
		<?php echo $form->error($model,'audio'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'video'); ?>
		<?php echo $form->textArea($model,'video',array('rows'=>6, 'cols'=>50)); ?>
		<?php echo $form->error($model,'video'); ?>
	</div>
    
    <?php 
        $selectedIos = array();
        foreach ($model->ios as $io)
            array_push($selectedIos, $io->id);
    ?>
    <div class="row">
		<?php echo $form->labelEx($model,'ios'); ?>
        <div class="portlet-content">
        <?php echo CHtml::button('Create Input/Output', array(
            'onclick' => "{ addIo(); $('#dialogIo').dialog('open');}",
        )) ?>
		<?php echo CHtml::checkBoxList(
            'Io', 
            $selectedIos, 
            CHtml::listData(Io::model()->findAll(),'id','name'),
            array(
                'template'=>'{input} {label}',
                'separator'=>'',
                'checkAll'=>'All',
                'labelOptions'=>array(
                    'style'=>'display:inline;',
                )
            )
        ); ?>
		</div>
        <?php echo $form->error($model,'ios'); ?>
	</div>
    
    <?php 
        $selectedAccessories = array();
        foreach ($model->accessories as $accessory)
            array_push($selectedAccessories, $accessory->id);
    ?>
    <div class="row">
		<?php echo $form->labelEx($model,'accessories'); ?>
        <div class="portlet-content">
        <?php echo CHtml::button('Create Accessory', array(
            'onclick' => "{ addAccessory(); $('#dialogAccessory').dialog('open');}",
        )) ?>
		<?php echo CHtml::checkBoxList(
            'Accessory', 
            $selectedAccessories, 
            CHtml::listData(Accessory::model()->findAll(),'id','name'),
            array(
                'template'=>'{input} {label}',
                'separator'=>'',
                'checkAll'=>'All',
                'labelOptions'=>array(
                    'style'=>'display:inline;',
                )
            )
        ); ?>
		</div>
        <?php echo $form->error($model,'accessories'); ?>
	</div>
    
    <?php 
        $selectedLanguages = array();
        foreach ($model->languages as $language)
            array_push($selectedLanguages, $language->id);
    ?>
    <div class="row">
		<?php echo $form->labelEx($model,'languages'); ?>
        <div class="portlet-content">
        <?php echo CHtml::button('Create Language', array(
            'onclick' => "{ addLanguage(); $('#dialogLanguage').dialog('open');}",
        )) ?>
		<?php echo CHtml::checkBoxList(
            'Language', 
            $selectedLanguages, 
            CHtml::listData(Language::model()->findAll(),'id','name'),
            array(
                'template'=>'{input} {label}',
                'separator'=>'',
                'checkAll'=>'All',
                'labelOptions'=>array(
                    'style'=>'display:inline;',
                )
            )
        ); ?>
		</div>
        <?php echo $form->error($model,'languages'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'extra'); ?>
		<?php echo $form->textArea($model,'extra',array('rows'=>6, 'cols'=>50)); ?>
		<?php echo $form->error($model,'extra'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'picture'); ?>
	</div>
    
    <div class="row">
        <div class="fieldset flash" id="fsUploadProgress">
            <span class="legend">Upload Queue</span>
        </div>
        <div style="display: inline; border: solid 1px #7FAAFF; background-color: #C5D9FF; padding: 2px;">
            <span id="spanButtonPlaceholder"></span>&nbsp;
            <input type="button" value="Upload Start" class="btn_startupload"/>
        </div>
        <div id="thumbnails"></div>
    </div>
   
	<div class="row">
		<?php echo $form->labelEx($model,'details'); ?>
		<?php echo $form->textArea($model,'details',array('rows'=>6, 'cols'=>50)); ?>
		<?php echo $form->error($model,'details'); ?>
	</div>

	<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>

<?php $this->endWidget(); ?>

</div><!-- form -->

<!-- Dialogs -->

<!-- Dialog for Creating Category -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogCategory',
    'options' => array(
        'title' => 'Create Category',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="categoryForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Operation System -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogOs',
    'options' => array(
        'title' => 'Create Operation System',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="osForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Display -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogDisplay',
    'options' => array(
        'title' => 'Create Display',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="displayForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Display -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogSensors',
    'options' => array(
        'title' => 'Create Sensors',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="sensorsForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Color -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogColor',
    'options' => array(
        'title' => 'Create Color',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="colorForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Network -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogNetwork',
    'options' => array(
        'title' => 'Create Network',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="networkForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Accessory -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogAccessory',
    'options' => array(
        'title' => 'Create Accessory',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="accessoryForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Input/Output -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogIo',
    'options' => array(
        'title' => 'Create Input/Output',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="ioForm"></div>
<?php $this->endWidget(); ?>

<!-- Dialog for Creating Language -->
<?php $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id' => 'dialogLanguage',
    'options' => array(
        'title' => 'Create Language',
        'autoOpen' => false,
        'modal' => true,
        'width' => 550,
        'height' => 470,
    ),
)); ?>
<div class="languageForm"></div>
<?php $this->endWidget(); ?>

<!------------------------------- Scripts ------------------------------------->
<script type="text/javascript">
// Add a category by ajax
function addCategory()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('category/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogCategory div.categoryForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogCategory div.categoryForm form').submit(addCategory);
            }
            else
            {
                //console.log(data);
                $('#Product_category_id').append('<option value='+data.model.id+' selected=\"selected\">'+data.model.name+'</option>');
                $('#dialogCategory div.categoryForm').html(data.div);
                setTimeout(\"$('#dialogCategory').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add a operation system by ajax
function addOs()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('os/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogOs div.osForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogOs div.osForm form').submit(addOs);
            }
            else
            {
                //console.log(data);
                $('#Product_os_id').append('<option value='+data.model.id+' selected=\"selected\">'+data.model.name+'</option>');
                $('#dialogOs div.osForm').html(data.div);
                setTimeout(\"$('#dialogOs').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add a display by ajax
function addDisplay()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('display/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogDisplay div.displayForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogDisplay div.displayForm form').submit(addDisplay);
            }
            else
            {
                //console.log(data);
                $('#Product_display').append('<option value='+data.model.id+' selected=\"selected\">'+data.model.name+'</option>');
                $('#dialogDisplay div.displayForm').html(data.div);
                setTimeout(\"$('#dialogDisplay').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add sensors by ajax
function addSensors()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('sensor/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogSensors div.sensorsForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogSensors div.sensorsForm form').submit(addSensors);
            }
            else
            {
                //console.log(data);
                $('#Product_sensors').append('<option value='+data.model.id+' selected=\"selected\">'+data.model.name+'</option>');
                $('#dialogSensors div.sensorsForm').html(data.div);
                setTimeout(\"$('#dialogSensors').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add a color by ajax
function addColor()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('color/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogColor div.colorForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogColor div.colorForm form').submit(addColor);
            }
            else
            {
                //console.log(data);
                $('#Color').append('<input value=\"'+data.model.id+'\" id=\"Color_'+(data.model.id-1)+'\" type=\"checkbox\" checked=\"checked\" name=\"Color[]\">');
                $('#Color').append('<label style=\"display:inline;\" for=\"Color_'+(data.model.id-1)+'\">'+data.model.name+data.model.hex+'</label>');
                $('#dialogColor div.colorForm').html(data.div);
                setTimeout(\"$('#dialogColor').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add a network by ajax
function addNetwork()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('network/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogNetwork div.networkForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogNetwork div.networkForm form').submit(addNetwork);
            }
            else
            {
                //console.log(data);
                $('#Network').append('<input value=\"'+data.model.id+'\" id=\"Network_'+(data.model.id-1)+'\" type=\"checkbox\" checked=\"checked\" name=\"Network[]\">');
                $('#Network').append('<label style=\"display:inline;\" for=\"Network_'+(data.model.id-1)+'\">'+data.model.name+'</label>');
                $('#dialogNetwork div.networkForm').html(data.div);
                setTimeout(\"$('#dialogNetwork').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}
 
// Add an accessory by ajax
function addAccessory()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('accessory/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogAccessory div.accessoryForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogAccessory div.accessoryForm form').submit(addAccessory);
            }
            else
            {
                //console.log(data);
                $('#Accessory').append('<input value=\"'+data.model.id+'\" id=\"Accessory_'+(data.model.id-1)+'\" type=\"checkbox\" checked=\"checked\" name=\"Accessory[]\">');
                $('#Accessory').append('<label style=\"display:inline;\" for=\"Accessory_'+(data.model.id-1)+'\">'+data.model.name+'</label>');
                $('#dialogAccessory div.accessoryForm').html(data.div);
                setTimeout(\"$('#dialogAccessory').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add an Input/Output by ajax
function addIo()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('io/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogIo div.ioForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogIo div.ioForm form').submit(addIo);
            }
            else
            {
                //console.log(data);
                $('#Io').append('<input value=\"'+data.model.id+'\" id=\"Io_'+(data.model.id-1)+'\" type=\"checkbox\" checked=\"checked\" name=\"Io[]\">');
                $('#Io').append('<label style=\"display:inline;\" for=\"Io_'+(data.model.id-1)+'\">'+data.model.name+'</label>');
                $('#dialogIo div.ioForm').html(data.div);
                setTimeout(\"$('#dialogIo').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

// Add a language by ajax
function addLanguage()
{
    <?php echo CHtml::ajax(array(
        'url'=>array('language/create'),
        'data'=> "js:$(this).serialize()",
        'type'=>'post',
        'dataType'=>'json',
        'success'=>"function(data)
        {
            if (data.status == 'failure')
            {
                $('#dialogLanguage div.languageForm').html(data.div);
                // Here is the trick: on submit-> once again this function!
                $('#dialogLanguage div.languageForm form').submit(addLanguage);
            }
            else
            {
                //console.log(data);
                $('#Language').append('<input value=\"'+data.model.id+'\" id=\"Language_'+(data.model.id-1)+'\" type=\"checkbox\" checked=\"checked\" name=\"Language[]\">');
                $('#Language').append('<label style=\"display:inline;\" for=\"Language_'+(data.model.id-1)+'\">'+data.model.name+'</label>');
                $('#dialogLanguage div.languageForm').html(data.div);
                setTimeout(\"$('#dialogLanguage').dialog('close') \",3000);
            }

        } ",
    )); ?>
    return false; 
}

</script>